<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      html body {
        width: 100vw;
        height: 100vh;
        margin: 0 0;
        padding: 0 0;
      }
      .basic {
        width: 400px;
        height: 100px;
        border: 1px solid black;
      }
      /* 三种心情 */
      .happy {
        background-color: orange;
      }
      .sad {
        background-color: green;
      }
      .normal {
        background-color: gray;
      }
      /* 三种类型 */
      .atguigu1 {
        border-radius: 20px;
        font-size: 24px;
      }
      .atguigu2 {
        background-color: rgb(35, 138, 255);
      }
      .atguigu3 {
        /* 设置发光效果 */
        text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red;
      }
    </style>
  </head>
  <body>
    <!-- 
    绑定样式：
        1.class样式
            写法：class="xxx" xxx可以是字符串、数组、对象
            字符串写法适用：        类名不确定、要动态获取
            数组写法适用于：        要绑定多个样式，个数不确定，名字也不确定
            对象写法适用于：        要绑定多个样式，个数确定，名字也确定 但是需要动态决定是否启用某个样式
    -->
    <div id="root">
      <!-- 变化的样式用绑定的方式写 -->
      <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
      <div class="basic" :class="mood" @click="changeMood">test</div>
      <br />

      <!-- 绑定class样式--数组写法，  适用于：样式类名不确定，数量也不确定 -->
      <!-- :class="['class1','class2']" 数组里的值是字符串。如果里面值没引号就相当于在data找class1属性 -->
      <div class="basic" :class="classArr">{{name}}</div>
      <br />

      <!-- 绑定class样式--对象写法，  适用于：样式数量、名字都确定，但是需要动态决定是否启用 -->
      <div class="basic" :class="classObj">{{name}}</div>
      <br />

      <!-- 
            也可以分为数组写法和对象写法，这里不一一列举了
            多个对象:style=[对象1,对象2...]  只有一个可以直接写 :style="对象1"
            里面要求是表达式，还不能带分号。用对象最合适，键用驼峰名，值和单位之间需要用连接符
        -->
      <!-- <div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div> -->
      <div class="basic" :style="[styleObj1,styleObj2]">{{name}}</div>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          name: "尚硅谷",
          mood: "normal",
          classArr: ["atguigu1", "atguigu2", "atguigu3"],
          classObj: {
            atguigu1: false,
            atguigu2: true,
          },
          styleObj1: {
            // 因为css里有font-size，但是js里-不合规，需要驼峰写法
            fontSize: "40px",
            color: "red",
            backgroundColor: "#00ffff",
          },
          styleObj2: {
            /* 设置发光效果 */
            textShadow: "0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red",
          },
        },
        methods: {
          changeMood() {
            const arr = ["happy", "sad", "normal"];
            this.mood = arr[Math.floor(Math.random() * 3)];
          },
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
